<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head lang="en">
    <meta charset="UTF-8">
    <title>Book数据首页</title>
</head>

<body>
<div class="row">
    <div class="container">
        <div class="col-sm-6 col-md-3 " th:each="book:${bookList}">
            <div class="thumbnail">
                <a th:href="@{/book/detail(bookId=${book.getId()})}"><img th:src="@{'/images/'+${book.getImgUrl()}}"
                                                                          alt="通用的占位符缩略图"></a>
                <div class="caption">
                    <h3 th:classappend="h3-height" th:text="${book.getName()}"></h3>
                    <p th:classappend="p-height">
                        价格:<span th:text="${book.getNewPrice()}"></span>元&nbsp;&nbsp;
                        作者:<span th:text="${book.getAuthor()}"></span>&nbsp;&nbsp;</p>
                    <p>
                        <a href="details.html">
                            更多信息
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!--分页-->
    <div class="container">
        <ul class="pager">
            <li th:classappend="${cur == 1}?'disabled':''">
                <!--javascript:void(0)表示点之后什么也不会发生-->
                <a href="javascript:void(0) " th:onclick="|loadData(${pre},${category})|"
                   th:style="${cur == 1}  ? 'pointer-events:none' : ''">&larr;上一页</a>

            </li>

            <li th:classappend="${cur == last}?'disabled':''">
                <a href="javascript:void(0)" th:onclick="|loadData(${next},${category})|"
                   th:style="${cur == last}  ? 'pointer-events:none' : ''">下一页 &rarr;</a>
            </li>
        </ul>
    </div>
</div>
</body>

</html>